<script setup lang="jsx">
import { ref } from 'vue';
import { ElButton, ElTag } from 'element-plus';
import { useBoolean } from '@sa/hooks';
import { fetchShopSeach } from '@/service/api';
import { useTable } from '@/hooks/common/table';
import { $t } from '@/locales';
import TaskLogSearch from './modules/task-log-search.vue';
import LogModal from './modules/log-modal.vue';

const { bool: visible, setTrue: openModal } = useBoolean();

const { columns, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchShopSeach,
  apiParams: {
    PageIndex: 1,
    PageSize: 10,
    id: undefined,
    name: undefined,
    platform: undefined,
    tag: undefined,
    times: undefined,
    status: undefined
  },
  columns: () => [
    { prop: 'serialNumber', label: $t('page.task.serialNumber') },
    { prop: 'type', label: $t('page.task.type') },
    { prop: 'CreateTime', label: $t('page.task.times') },
    { prop: 'platform', label: $t('page.task.storeQuantity') },
    { prop: 'Name', label: $t('page.task.completedQuantity') },
    {
      prop: 'status',
      label: $t('page.task.status'),
      width: 100,
      formatter: row => {
        if (row.status === undefined) return '';

        const tagMap = {
          1: 'success',
          2: 'warning'
        };

        return <ElTag type={tagMap[row.status]}>{row.status}</ElTag>;
      }
    },
    {
      prop: 'operate',
      label: $t('common.operate'),
      width: 130,
      formatter: row => (
        <div class="flex-center">
          <ElButton type="primary" plain size="small" onClick={() => handleView(row.id)}>
            {$t('common.viewLog')}
          </ElButton>
        </div>
      )
    }
  ]
});

const editingData = ref(null);

function handleView(id) {
  openModal(id);
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <TaskLogSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <ElCard class="sm:flex-1-hidden card-wrapper">
      <ElTable v-loading="loading" height="100%" border class="sm:h-full" :data="data" row-key="ShopId">
        <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
      </ElTable>
      <div class="mt-20px flex justify-end">
        <ElPagination
          v-if="mobilePagination.total"
          layout="total,prev,pager,next,sizes"
          v-bind="mobilePagination"
          @current-change="mobilePagination['current-change']"
          @size-change="mobilePagination['size-change']"
        />
      </div>
    </ElCard>
    <LogModal v-model:visible="visible" :row-data="editingData" />
  </div>
</template>
